<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never">
      <div class="toolbar-wrapper">
        <div>
          <el-button
            type="primary"
            :icon="CirclePlus"
            @click="dialogVisible = true"
          >
            新增部门
          </el-button>
        </div>
        <div>
          <el-tooltip content="刷新当前页">
            <el-button
              type="primary"
              :icon="RefreshRight"
              circle
              @click="getTableData"
            />
          </el-tooltip>
        </div>
      </div>

      <div class="table-wrapper">
        <el-table
          :data="tableData"
          border
          highlight-current-row
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="65"
          />
          <el-table-column align="center" label="部门名称" prop="deptName" />
          <el-table-column align="center" label="部门编码" prop="deptCode" />
          <el-table-column align="center" label="创建日期" prop="createTime" />
          <el-table-column
            align="center"
            label="最后更新时间"
            prop="updateTime"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="250"
            align="center"
          >
            <template #default="scope">
              <el-button
                type="primary"
                text
                size="small"
                @click="handleUpdateSon(scope.row)"
              >
                添加子部门
              </el-button>
              <el-button
                type="primary"
                text
                size="small"
                @click="handleUpdate(scope.row)"
              >
                修改
              </el-button>
              <el-button
                type="danger"
                text
                size="small"
                @click="handleDelete(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 新增/修改 -->
    <EditDeptDetailsDialog
      v-if="dialogVisible"
      :deptId="deptId"
      :deptParent="deptParent"
      :closedDialog="handleClosedDialog"
    />
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref } from "vue";
import DeptAPI, { type DeptVO } from "@/api/system/base/dept";
import { ElMessageBox } from "element-plus";
import { CirclePlus, RefreshRight } from "@element-plus/icons-vue";
import EditDeptDetailsDialog from "@/views/system/base/dept/components/EditDeptDetailsDialog.vue";

/** 部门管理 */
defineOptions({
  name: "BaseDept",
});

/** 弹窗状态 */
const dialogVisible = ref<boolean>(false);
/** 部门id */
const deptId = ref<string>();
/** 部门父级 */
const deptParent = ref<DeptVO>();
/** 弹窗状态 */
const loading = ref<boolean>(false);
/** 表格数据 */
const tableData = ref<DeptVO[]>([]);

/** 删除 */
const handleDelete = (row: DeptVO) => {
  ElMessageBox.confirm(`正在删除：${row.deptName}，确认删除？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    row.id &&
      DeptAPI.delBaseDeptApi(row.id).then(() => {
        ElMessage.success("删除成功");
        getTableData();
      });
  });
};
/** 打开弹窗添加子部门 */
const handleUpdateSon = (row: DeptVO) => {
  dialogVisible.value = true;
  deptParent.value = row;
};
/** 打开弹窗 */
const handleUpdate = (row: DeptVO) => {
  dialogVisible.value = true;
  deptId.value = row.id;
};
/** 关闭弹窗 */
const handleClosedDialog = (data: any) => {
  // 有值，则刷新列表
  if (data) {
    getTableData();
  }
  deptId.value = undefined;
  deptParent.value = undefined;
  dialogVisible.value = false;
};

/** 列表接口 */
const getTableData = () => {
  loading.value = true;
  DeptAPI.getBaseDeptTreeApi()
    .then((res) => {
      const { data } = res;
      tableData.value = data;
    })
    .catch(() => {
      tableData.value = [];
    })
    .finally(() => {
      loading.value = false;
    });
};
/** 页面渲染完成后初始化 */
onBeforeMount(async () => {
  getTableData();
});
</script>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;

  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
